<template>
    <div>
        <h2>展示用户信息</h2>
        <table>
            <tr>
                <td>id</td>
                <td>name</td>
                <td>user_level</td>
                <td>score</td>
            </tr>
            <tr v-for="i in items" :key="i.id">
                <td>{{i.id}}</td>
                <td>{{i.username}}</td>
                <td>{{i.user_level}}</td>
                <td>{{i.score}}</td>
            </tr>
        </table>
        <p>
            <button @click="up_page()">上一頁</button>
            <button v-for="p in page_list" :key="p" @click="page(p)">{{p}}</button>
            <button @click="down_page()">下一頁</button>    
        </p>
        
    </div>
</template>
<script>
import axios from "axios"
export default {
    name:"showuser",
    data() {
        return {
            items:[],
            all_page:"",
            p:1,
            page_list:""
        }
    },
    methods:{
        get_page(){
            var data={"page":this.p}
            axios({
                url:"http://127.0.0.1:8000/app04/page/",
                method:"get",
                params:data
            }).then(res=>{
                console.log(res.data)
                this.items=res.data.data
                this.all_page=res.data.all_page
                this.page_list = res.data.page_list
            })
        },
        up_page(){
            if(this.p>1){
                this.p-=1
                this.get_page()
            }else{
                this.get_page()
            }
        },
        down_page(){
            if(this.p<this.all_page){
                this.p+=1
                this.get_page()
            }else{
                this.get_page()
            }
        },
        page(p){
            this.p=p
            this.get_page()
        }
    },
    created(){
        this.get_page()
    }
}
</script>

<style>

</style>
